<script setup>
import { reactive, ref, onMounted, nextTick } from 'vue';
import { getBrandListApi, deleteBrandApi, updateBrandInfoApi } from '@/apis/pms/brand';
import { Delete, EditPen, Search, Switch, Refresh } from '@element-plus/icons-vue';
import addUpdate from './components/addUpdate';
import relateCategory from './components/relateCategory'

// 查询参数
const params = reactive({
  pageNum: 1,
  pageSize: 10,
  name: '',
  firstLetter: '',
})

const loading = ref(false)

// 数据
const brandData = ref({})
const getBrandList = async () => {
  loading.value = true
  const res = await getBrandListApi(params);
  brandData.value = res.data;
  loading.value = false
}

// 分页
const getBrandListPage = (currentIndex) => {
  params.pageNum = currentIndex;
  getBrandList()
}

// 添加/编辑品牌
const childAddOrUpdate = ref();
const handleAddOrUpdate = async (id) => {
  await nextTick(() => {
    childAddOrUpdate.value.init(id);
  })
}

// 添加关联
const childRelateCategory = ref();
const handleAssociationCategory = async (id) => {
  await nextTick(() => {
    childRelateCategory.value.init(id);
  })
}

// 删除
const handleRemove = (id) => {
  ElMessageBox.confirm(
    '你确定要删除此品牌吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      let ids = [id];
      deleteBrandApi(ids)
        .then(res => {
          if (res.code === 0) {
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            getBrandList()
          }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

// 复选框
const ids = ref([])
const handleSelectionChange = (selection) => {
  ids.value = []
  selection.forEach(el => {
    ids.value.push(el.id)
  })
}

// 批量删除
const handleRemoves = () => {
  if (ids.value.length === 0) {
    ElMessage({
      message: '没有要删除的数据',
      type: 'info',
    })
    return;
  }

  ElMessageBox.confirm(
    '你确定要删除这些品牌吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      deleteBrandApi(ids.value)
        .then(res => {
          if (res.code === 0) {
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            getBrandList()
          }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

// 改变状态
const updateVisible = (brand) => {
  updateBrandInfoApi(brand).then(res => {
    if (res.code === 0) {
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
      getBrandList()
    }
  })
}

// 查询
const handleQuery = () => {
  getBrandList()
}

// 返回刷新数据
const handleRefresh = () => {
  params.name = '';
  params.firstLetter = '';
  getBrandList()
}


onMounted(() => getBrandList())
</script>

<template>
  <div class="container" v-loading="loading">
    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <span style="display: inline-block;width: 70px;">品牌名称</span>
        <el-input v-model="params.name" placeholder="请输入要查询的品牌名" clearable style="width: 280px;" />
        <span style="display: inline-block;width: 60px;margin-left: 10px;">首字母</span>
        <el-input v-model="params.firstLetter" placeholder="请输入要查询的首字母" clearable style="width: 280px;" />
        <el-button type="primary" :icon="Search" style="margin-left: 10px;" @click="handleQuery">搜索</el-button>
        <el-button @click="handleRefresh" :icon="Refresh">重置</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <el-button type="primary" plain @click="handleAddOrUpdate(null)">添加品牌</el-button>
        <el-button type="danger" plain @click="handleRemoves">批量删除</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table :data="brandData.list" border @selection-change="handleSelectionChange" style="width: 100%;">
          <el-table-column type="selection" width="60" align="center" />
          <el-table-column prop="name" label="品牌名" align="center" />
          <el-table-column prop="firstLetter" label="检索首字母" width="150" align="center" />
          <el-table-column prop="logoUrl" label="品牌图片" align="center">
            <template v-slot="scope">
              <div style="height: 75px;"><img :src="scope.row.logoUrl" style="height: 100%;"></div>
            </template>
          </el-table-column>
          <el-table-column prop="visible" label="是否显示" width="150" align="center">
            <template v-slot="scope">
              <el-switch v-model="scope.row.visible" class="ml-2"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="0"
                :inactive-value="1" @change="updateVisible(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" width="150" align="center" />
          <el-table-column fixed="right" label="操作" width="240" align="center">
            <template v-slot="scope">
              <el-button type="primary" text size="small" :icon="Switch"
                @click="handleAssociationCategory(scope.row.id)">关联</el-button>
              <el-button type="primary" text size="small" :icon="EditPen" @click="handleAddOrUpdate(scope.row.id)">修改</el-button>
              <el-button type="primary" text size="small" :icon="Delete"
                @click="handleRemove(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <div class="pageination">
      <el-pagination v-model:current-change="brandData.pageNum" :page-size="brandData.pageSize" background
        layout="prev, pager, next" :page-count="brandData.pages" @current-change="getBrandListPage" />
    </div>
  </div>
  
  <!-- 添加和修改 -->
  <addUpdate @refreshData="getBrandList" ref="childAddOrUpdate"></addUpdate>
  <!-- 关联分类 -->
  <relateCategory ref="childRelateCategory"></relateCategory>
</template>

<style scoped lang='scss'></style>